Better JavaScript — No Globals or with

Like any kind of apps, JavaScript apps also have to be written well.

Otherwise, we run into all kinds of issues later on.

In this article, we’ll look at ways to improve our JavaScript code.

Minimize the User of the Global Object

Global objects go against the principle of modularity.

All the variables are available anywhere.

And anything can modify them.

This is a problem that we have when we work with them.

It’s very hard to trace the values of them since they can be changed by anything.

All the components are coupled together when we use global variables.

This is definitely unacceptable when we have big apps.

The global namespace was the only way for separate parts of a JavaScript app to interact until we have modules.

Therefore, we should use modules to separate the parts and lets us use the part we want.

Also, we should be careful in not to create global variables accidentally.

We can do this if we create a variable with var at the top level.

For instance, we can write:

var x = 1;

And we shouldn’t create function declarations at the top level.

So we shouldn’t have:

function foo() {}

Also, we shoildn’tr accidentally create global variables by assigning something that’s not defined.

So don’t write something like:

foo = 1;

or:

this.foo = 1;

at the top level.

These statements all update the global object.

But we can prevent the last 2 items from creating global variables with struct mode.

We can still use global objects from the JavaScript standard library.

For instance, we can use objects like Array , Number , JSON , etc.

But we definitely shouldn’t create new ones.

And if we want to make code accessible to other parts of an app, we should use modules.

Browsers support modules out of the box and we can use module bundlers to build them into one app.

Always Declare Local Variables

We should always declare local variables.

To do this, we can use the let and const keywords.

They’re all block-scoped so the variable stays within the block.

For instance, don’t write:

function swap(arr, i, j) {
  temp = arr[i];
  arr[i] = arr[j];
  arr[j] = temp;
}

Instead, we write:

function swap(arr, i, j) {
  const temp = arr[i];
  arr[i] = arr[j];
  arr[j] = temp;
}

We add the const before the variable name so that we won’t declare a global variable.

Creating global variables is definitely a bad style.

And creating them accidentally is worse.

We can use a linter to check for these kinds of mistakes automatically.

This is one of the things that linters like ESLint would check for.

Avoid the with Statement

We should never use the with statement in our code.

It doesn’t offer many conveniences, but it does offer lots of unreliability and inefficiency.

The inefficiency comes from the fact that the scope can’t be determined by checking the code.

Therefore, optimization is impossible.

The uncertainty of the scope also means working with what’s inside is confusing.

If we have something like:

function foo(x, y) {
  with(Math) {
    return min(round(x), sqrt(y));
  }
}

then we don’t know if x and y are from the parameters or the Math object.

Therefore, we should never use it.

Conclusion

We should always avoid creating global variables and avoid using the with statement.